<!DOCTYPE html>
<html>
<head>
    <title>轨迹动画示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
	</style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1zCurcFsElvz9ppBbGznbioXHDX82Tyw"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
    <title>视角轨迹动画</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var bmap = new BMapGL.Map("allmap");    // 创建Map实例
	bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);  // 初始化地图,设置中心点坐标和地图级别
    bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var path = [{
        'lng': 116.297611,
        'lat': 40.047363
    }, {
    	'lng': 116.302839,
    	'lat': 40.048219
    }, {
    	'lng': 116.308301,
    	'lat': 40.050566
    }, {
    	'lng': 116.305732,
    	'lat': 40.054957
    }, {
    	'lng': 116.304754,
    	'lat': 40.057953
    }, {
    	'lng': 116.306487,
    	'lat': 40.058312
    }, {
    	'lng': 116.307223,
    	'lat': 40.056379
    }];
    var point = [];
    for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }
    var pl = new BMapGL.Polyline(point);
    setTimeout('start()', 3000);
    function start () {
        trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
            overallView: true,
            tilt: 30,
            duration: 20000,
            delay: 300
        });
        trackAni.start();
    }
</script>